<template>
  <div class="bindtel">
    <van-nav-bar
      :title="$t('bind.teltitle')"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="bindtel-body">
      <van-form ref="fromRef">
        <van-cell-group :border="false">
          <div class="bindtel-label">{{ t("bind.tel") }}</div>
          <van-field
            :border="false"
            v-model="data.phonenumber"
            name="tel"
            class="dev-field tel-field"
            :placeholder="t('bind.telmsg')"
            :rules="[{ validator: telvalidate }]"
          >
            <template #label>
              <div class="tel-label">
                +<span
                  v-if="!data.areaCode"
                  class="select-tel"
                  @click="showPicker = true"
                  >{{ $t("areaCode") }}</span
                >
                <van-field
                  v-else
                  v-model="data.areaCode"
                  is-link
                  readonly
                  name="picker"
                  @click="showPicker = true"
                  class="select-tel"
                >
                  <template #default>
                    <div>211</div>
                  </template>
                </van-field>
                <img
                  src="@/assets/images/person/triangle.png"
                  class="traangle"
                />
              </div>
            </template>
          </van-field>
        </van-cell-group>
      </van-form>
    </div>
    <van-popup :show="showPicker" position="bottom">
      <van-picker
        :columns="columns"
        :columns-field-names="fieldName"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <div class="bindtel-foot">
      <van-button
        type="primary"
        round
        width="244px"
        @click="onBind"
        :loading="subLoading"
        >{{ t("bind.btnsub") }}</van-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "@vue/reactivity";
import { useI18n } from "vue-i18n";
import { onMounted } from "vue";
import { Toast } from "vant";
import { updateUserInfo, countryList } from "@/api/user";
import { useRouter, useRoute } from "vue-router";
import usePoint from "@/hooks/usePoint.js";
const point = usePoint();
const router = useRouter();
const { t } = useI18n();
const data = reactive({
  phonenumber: "",
  areaCode: "", //区号
});

const fieldName = { text: "areaCode", value: "areaCode" };
const columns = [];
let showPicker = ref(false); //区号选择显示
const telvalidate = (value) => {
  const TEL_REGEXP = /^\d{7,11}$/;
  if (!TEL_REGEXP.test(value)) {
    return t("bind.telErr");
  }
};
onMounted(() => {
  data.phonenumber = point.userInfo.phonenumber;
  data.areaCode = point.userInfo.areaCode;
  countryList().then((res) => {
    console.log(res.data);
    Object.assign(columns, res.data);
  });
});
const onConfirm = (item) => {
  data.areaCode = item.areaCode;
  showPicker.value = false;
};
const fromRef = ref(null);
function onClickLeft() {
  router.replace("/information");
}
let subLoading = ref(false);
function onBind() {
  fromRef.value.validate().then((valid) => {
    updateUserInfo({ ...point.userInfo, ...data })
      .then((res) => {
        subLoading.value = false;
        point.updataInfo().then(() => {
          Toast(t(res.msg));
        });
      })
      .catch((err) => {
        Toast(err);
        subLoading.value = false;
      });
  });
}
</script>

<style lang="less" scoped>
.bindtel {
  &-body {
    padding: 0px 16px;
  }
  &-label {
    line-height: 14px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
    margin-top: 15px;
  }
  .traangle {
    width: 10px;
    height: 15px;
    margin-right: 10px;
    margin-left: 10px;
    position: relative;
    top: 3px;
  }
  .tel-label {
    border-bottom: 1px solid #626060;
    position: relative;
    top: 1px;
    // padding-bottom: 5px;
    text-align: center;
    display: flex;
    height: 32px;
    overflow: hidden;
    min-width: 100px;
    :deep(.van-cell.van-cell--clickable.van-field.select-tel) {
      height: 34px;
    }
  }
  :deep(.van-cell__title.van-field__label) {
    width: 60px;
    margin-right: 0px;
  }
  &-foot {
    margin-top: 52px;
    text-align: center;
    button.van-button.van-button--primary.van-button--normal.van-button--round {
      width: 244px;
    }
  }
  :deep(.van-cell.van-cell--clickable.van-field.select-tel) {
    border: 0px;
    padding: 0px 1px;
  }
  :deep(.van-cell.van-field.dev-field.select-tel .van-field__body) {
    border: 0px;
    padding: 0px;
  }
  .tel-field {
    :deep(.van-cell__title.van-field__label) {
      min-width: 95px;
    }
  }
  .select-tel {
    :deep(i.van-badge__wrapper.van-icon.van-icon-arrow.van-cell__right-icon) {
      display: none;
    }
    :deep(.van-field__body) {
      border-bottom: 0px;
    }
  }
}
</style>
